<template>
<h1>员工列表练习</h1>
  <input type="text" v-model="newUser.name">
  <input type="text" v-model="newUser.salary">
  <input type="text" v-model="newUser.job">
  <hr>
  <button @click="inserT()">添加</button>
  <hr>
  <table border="1px">
    <tr>
      <th>编号</th>
      <th>员工姓名</th>
      <th>员工工资</th>
      <th>员工岗位</th>
    </tr>
    <tr v-for="(user, index) in user">
      <td>{{ index +1}}</td>
      <td>{{user.name}}</td>
      <td>{{user.salary}}</td>
      <td>{{user.job}}</td>
    </tr>
  </table>
</template>

<script setup>
import {ref} from "vue";

const user = ref([{name: '张三', salary: 10000, job: '前端'},{name: '李四', salary: 20000, job: '后端'}]) ;

const newUser = ref({name: '', salary: '', job: ''})

const inserT = () => {
  user.value.push(newUser.value)
  newUser.value = {name: '', salary: '', job: ''};
}
</script>

<style scoped>

</style>